<template>
    <el-row :gutter="15">
        <el-col :span="6">
            <router-link to="/home" class="navBottom">
            <li class="el-icon-share"></li>
            <label>首页</label>
        </router-link>
    </el-col>
    <el-col :span="6">
        <router-link to="/find" class="navBottom">
         <li class="el-icon-search"></li>
         <label>发现</label>
        </router-link>
    </el-col>
    <el-col :span="6">
        <router-link to="/order" class="navBottom">
         <li class="el-icon-shopping-cart-full"></li>
         <label >购物</label>
     </router-link>
    </el-col>
    <el-col :span="6">
        <router-link to="/my" class="navBottom">
         <li class="el-icon-s-custom"></li>
         <label>我的</label>
     </router-link>
    </el-col>
    </el-row>
       
     
     
 

</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
            msg: 'Hello Vue World!'
        })
    
        return {
            ...toRefs(state)
        }
    }
}
</script>

<style  scoped>
/* .navBottom{
    margin-right: 15px;
}
.navBottom li{
    list-style: none;
} */
</style>